<template>
  <div>
    <van-nav-bar title="手机号修改"
                 right-text="确认"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <div class="form-wrapper">
      <van-field class="input-field"
                 v-model.number="data.value1"
                 placeholder="请输入手机号">
        <template #button>
          <van-button size="small"
                      @click="handleClick">发送验证码</van-button>
        </template>
      </van-field>
      <van-field class="input-field"
                 v-model.number="data.value2"
                 placeholder="请输入验证码" />
    </div>

  </div>

</template>
<script>
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      value: ''
    })
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/userInfo')
    }
    function onClickRight () {
      proxy.$axios.user.changePhone().then(res => {
        if (res.status === 200) {
          Toast.success('提交成功')
        }
      })
    }
    function handleClick () {
      console.log('等待处理逻辑')
    }
    return {
      data,
      onClickRight,
      onClickLeft,
      handleClick
    }
  }
}
</script>
<style lang="scss" scoped>
.form-wrapper {
  margin: $margin-horizon;
}
.input-field {
  margin-top: $margin-verticle;
}
</style>
